<template>
    <div class="slider" ref="slider">
        <div class="slider-group" ref="sliderGroup">
          <slot>
          </slot>
        </div>
      <div class="dots">
        <span class="dot" v-for="(item,index) in dots" :class="{active:getCurrentPage == index}"></span>
      </div>
    </div>
</template>

<script>
  import {addClass} from 'common/js/dom';
  import BScroll from 'better-scroll'
  export default {
    name: 'slider',
    props:{
      loop:{
        type:Boolean,
        default:true,
      },
      autoPlay:{
        type:Boolean,
        default:true,
      },
      interval:{
        type:Number,
        default:4000
      }
    },
    data(){
      return{
        dots:[],
        getCurrentPage:0,
      }
    },

    mounted () {
      setTimeout(()=>{
        this.setSliderWidth();
        this.initDots();
        this.initSlider();

        if(this.autoPlay){
          this.play()
        }
      },20)
      window.addEventListener('resize',()=>{
        if(!this.slider){
           return;
        }
        this.setSliderWidth(true);
        this.slider.refresh();
      })
    },
    methods:{
      setSliderWidth(isRefresh){
          this.children = this.$refs.sliderGroup.children;

          let width = 0;
          let silderWidth = this.$refs.slider.clientWidth;

          for(let i=0;i<this.children.length;i++){
            let child = this.children[i];

            addClass(child,'slider-item');

            child.style.width = silderWidth + 'px';

            width += silderWidth;

          }

          if(this.loop && !isRefresh){
            width += 2*silderWidth;
          }

          this.$refs.sliderGroup.style.width=width + 'px';


      },

      initDots(){
        this.dots = new Array(this.children.length);
      },

      initSlider(){
          this.slider = new BScroll(this.$refs.slider,{
            scrollX:true,
            scrollY:false,
            momentum:false,
            snap:{
              loop:this.loop, //循环
              threshold:0.3,
              speed:400 //轮播间隔
            },
            click:true
        })
        this.slider.on('scrollEnd',()=>{
          let pageIndex = this.slider.getCurrentPage().pageX;
          this.getCurrentPage = pageIndex;

          if(this.autoPlay){
            clearTimeout(this.timer);
            this.play();
          }
        })
      },
      play(){
        let pageIndex = this.getCurrentPage+1;
        if(this.loop){
          pageIndex+=1;
        }
        this.timer = setTimeout(()=>{
          this.slider.next();
        },this.interval)
      }
    },
    destroyed () {
      clearTimeout(this.timer);
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  .slider
    min-height: 1px
    .slider-group
      position: relative
      overflow: hidden
      white-space: nowrap
      .slider-item
        float: left
        box-sizing: border-box
        overflow: hidden
        text-align: center
        a
          display: block
          width: 100%
          overflow: hidden
          text-decoration: none
        img
          display: block
          width: 100%
    .dots
      position: absolute
      right: 0
      left: 0
      bottom: 12px
      text-align: center
      font-size: 0
      .dot
        display: inline-block
        margin: 0 4px
        width: 8px
        height: 8px
        border-radius: 50%
        background: $color-text-l
        &.active
          width: 20px
          border-radius: 5px
          background: $color-text-ll
</style>
